import axios from 'axios'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import { useLocation, useParams, useSearchParams } from 'react-router-dom'

export default function HeroDetail() {
  let [heros,setHeros] = useState({})
  // 获取params id 参数
  // let {id} = useParams()
  // 获取 query id 参数
  // let [search] = useSearchParams()
  // let id = search.get('id')
  let {state:{id}} = useLocation()

  useEffect(  ()=>{
    let getHeros = async()=>{
      let result = await axios.get(`https://api.xiaohigh.com/heros/${id}`)
      setHeros(result.data)
    } 
    getHeros()
  }, [])
  return (
    <div className="hero-detail container" style={{paddingTop: 30}}>
      {/* 左边 */}
      <div className="col-xs-3">
        <div style={{background: '#eee', overflow: 'hidden', padding: '20px 10px 20px'}}>
          <h3>{heros.name}</h3>
          <p>{heros.type}</p>
          <div className="row">
            {
              heros.skills && heros.skills.map((item,index)=>{
                return <div className="col-xs-3">
              <img width="100%" src={"http://cdn.xiaohigh.com" + item.img} alt="" />
              <p>{item.name}</p>
            </div>
              })
            }
          </div>
        </div>
      </div>

      {/* 右边 */}
      <div className="col-xs-9">
        <div><img width="100%" src={"http://cdn.xiaohigh.com" + heros.big_image} alt="" /></div>        

        <p style={{paddingTop: 30}} dangerouslySetInnerHTML={{__html: heros.intro}}>
        </p>
      </div>
    </div>
  )
}
